<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>22001010431-曹鹏</title>

    <link rel="stylesheet" href="./css/caopeng.css">
    <link rel="stylesheet" href="./iconfonts/fonts/iconfont.css">
    <link rel="stylesheet" href="./iconfonts/icon/fonts/iconfont.css">
    <link rel="stylesheet" href="./css/yongyexinghe.css">
</head>

<body>
    <header class="cao-nav">
        <div class="cao-nav-left">
            <span class="iconfont icon-tengxunshipin"></span>
            <span class="cao-ten">腾讯视频</span>
        </div>
        <form>
            <input type="text" value="永夜星河">
            <button type="submit" class="iconfont icon-sousuo" value="全网搜索" ></button>
        </form>
        <div class="cao-nav-right">
            <span class="iconfont icon-vip1"></span>
            <span class="iconfont icon-airudiantubiaohuizhi-zhuanqu_youxi"></span>
            <span class="iconfont icon-lishi"></span>
            <span class="iconfont icon-video"></span>
            <span class="iconfont icon-a-huaban1fuben10"></span>
            <img src="image/头像.png">
        </div>
    </header>
    <div class="cao-partition">
        <div class="cao-content">
            <p class="cao-celected">全部</p>
            <p>用户</p>
        </div>
    </div>
    <article>
        <div class="cao-left">
            <h2>永夜星河 影视作品</h2>
            <a href="#" class="cao-video-link">
                <img src="image/2.png">
                <h4>永夜星河</h4>
                <p>普通话/原版/2024</p>
            </a>
            <a href="#">
                <img src="image/8.png">
                <h4>闪耀的恒星</h4>
                <p>2024</p>
            </a>
            <a href="#">
                <img src="image/7.png">
                <h4>《永夜星河》攻略加载夜直播</h4>
                <p>普通话/原版/2024</p>
            </a>
            <a href="#">
                <img src="image/5.png">
                <h4>《永夜星河》点映礼专属花絮</h4>
                <p>普通话/原版2024</p>
            </a>

            <a href="#">
                <img src="image/4.png">
                <h4>《永夜星河》点映礼竹林四侠告别ID</h4>
                <p>普通话/原版/2024</p>
            </a>

            <a href="#">
                <img src="image/6.png">
                <h4>《永夜星河》专属花絮特辑</h4>
                <p>普通话/原版/2024</p>
            </a>
        </div>
        <div class="cao-right">
            <div class="cao-hot">
                <h2 id="cao-hot-label">热搜榜单</h2>
                <a href="#" id="cao-hot-link">更多&gt;</a>
            </div>
            <ul class="cao-u">
                <li class="cao-celected" onclick="change(0)">
                    <a href="#">总榜</a>
                </li>
                <li onclick="change(1)"><a href="#">电视剧</a></li>
                <li><a href="#">少儿</a></li>
                <li><a href="#">综艺</a></li>
                <li><a href="#">电影</a></li>
                <li><a href="#">动漫</a></li>
            </ul>
            <ol class="cao-o">
                <li><span class="cao-celected">1</span>现在就出发 第2季</li>
                <li><span class="cao-celected">2</span>现在就出发 第2季</li>
                <li><span class="cao-celected">3</span>现在就出发 第2季</li>
                <li><span>4</span>现在就出发 第2季</li>
                <li><span>5</span>现在就出发 第2季</li>
                <li><span>6</span>现在就出发 第2季</li>
                <li><span>7</span>现在就出发 第2季</li>
                <li><span>8</span>现在就出发 第2季</li>
                <li><span>9</span>现在就出发 第2季</li>
                <li><span>10</span>现在就出发 第2季</li>
            </ol>
        </div>
    </article>
    <footer>
        <div class="cao-line">
            <hr size="3px" color="#ff5c38">
        </div>
        <div class="cao-footer">
            <div class="cao-links1">
                <dl>
                    <dt>特色推荐</dt>
                    <dd><a href="#">自制推荐</a></dd>
                    <dd><a href="#">杀毒软件</a></dd>
                </dl>
            </div>
            <div class="cao-links2">
                <h4>软件下载</h4>
                <div class="cao-icon">
                    <a href="https://v.qq.com/biu/download#iPhone">
                        <span class="iconfont icon-mobile"></span>
                        <p>手机版</p>
                    </a>
                </div>
                <div class="cao-icon">
                    <a href="https://v.qq.com/biu/download#Windows">
                        <span class="iconfont icon-windows"></span>
                        <p>Windows 版</p>
                    </a>
                </div>
                <div class="cao-icon">
                    <a href="https://v.qq.com/biu/download#Mac">
                        <span class="iconfont icon-mac"></span>
                        <p>Mac 版</p>
                    </a>
                </div>
                <div class="cao-icon">
                    <a href="https://v.qq.com/biu/download#Pad">
                        <span class="iconfont icon-ipad1"></span>
                        <p>iPad 版</p>
                    </a>
                </div>
                <div class="cao-icon">
                    <a href="https://v.qq.com/biu/download#TV">
                        <span class="iconfont icon-diannaoduan"></span>
                        <p>TV 版</p>
                    </a>
                </div>
            </div>
            <div class="cao-links3">
                <dl>
                    <dt>服务</dt>
                    <dd><a href="#">客服</a></dd>
                    <dd><a href="#">反馈</a></dd>
                    <dd><a href="#">侵权投诉</a></dd>
                    <dd><a href="#">免广告合作</a></dd>
                    <dd><a href="#">vip 采购</a></dd>
                </dl>
            </div>
        </div>

        <div class="cao-speak">
            <p>粤网文[2017]6138-1456 号 | 网络视听许可证 1904073 号 | 增值电信业务经营许可证:粤 B2-20090059 | 粤公网安备 44030002000001 号</p>
            <p>关于腾讯 | About Tencent | 服务条款 | 广告服务 | 腾讯招聘 | 客服中心 | 网站导航</p>
            <p>Copyright © 1998 - 2024 Tencent. All Rights Reserved.</p>
            <p>腾讯公司 版权所有</p>
        </div>

    </footer>
    <script>
        const videoLink = document.querySelector('.cao-video-link');
        if (videoLink) {
            videoLink.addEventListener('click', function (event) {
                event.preventDefault();
                window.location.href = 'video.html';
            });
        }

        const hotLabel = document.getElementById('cao-hot-label');
        const hotLink = document.getElementById('cao-hot-link');

        // 点击热搜榜单，跳转到排行榜页面
        hotLabel.addEventListener('click', function () {
            window.location.href = 'rankingList.html';
        });
        hotLabel.addEventListener('mouseover', function () {
            this.style.color = 'red';
        });
        hotLabel.addEventListener('mouseout', function () {
            this.style.color = '';
        });



        // 选择页面中具有类名'cao-u'下的所有<li>元素
        const li = document.querySelectorAll('.cao-u li');
        // 选择页面中具有类名'cao-o'的元素
        const content = document.querySelector('.cao-o');

        function change(index) {
            if (index === 0) {
                li[1].classList.remove('cao-celected');
                li[0].classList.add('cao-celected');
                content.innerHTML = `
            <li><span class="cao-celected">1</span>现在就出发 第2季</li>
            <li><span class="cao-celected">2</span>现在就出发 第2季</li>
            <li><span class="cao-celected">3</span>现在就出发 第2季</li>
            <li><span>4</span>现在就出发 第2季</li>
            <li><span>5</span>现在就出发 第2季</li>
            <li><span>6</span>现在就出发 第2季</li>
            <li><span>7</span>现在就出发 第2季</li>
            <li><span>8</span>现在就出发 第2季</li>
            <li><span>9</span>现在就出发 第2季</li>
            <li><span>10</span>现在就出发 第2季</li>
        `;
            } else {
                li[0].classList.remove('cao-celected');
                li[1].classList.add('cao-celected');
                content.innerHTML = `
            <li><span class="cao-celected">1</span>现在就出发 第1季</li>
            <li><span class="cao-celected">2</span>现在就出发 第1季</li>
            <li><span class="cao-celected">3</span>现在就出发 第1季</li>
            <li><span>4</span>现在就出发 第1季</li>
            <li><span>5</span>现在就出发 第1季</li>
            <li><span>6</span>现在就出发 第1季</li>
            <li><span>7</span>现在就出发 第1季</li>
            <li><span>8</span>现在就出发 第1季</li>
            <li><span>9</span>现在就出发 第1季</li>
            <li><span>10</span>现在就出发 第1季</li>
        `;
            }
        }
    </script>
</body>

</html>